<!--
 @description 
 @fileName Index.vue
 @author zengqiongying
 @created 2023/06/13 10:07:20
-->
<template>
  <div class="has-foot-pb">
    <div class="ctm-content-head-fixed">
      <SearchInput
        v-model="searchValue"
        placeholder="搜索店铺名称/装修项目号"
        @search="onSearch"
        @clear="onClear"
        @cancel="onSearch"
      />
    </div>

    <div class="ctm-content-tabs-sticky">
      <qmp-tabs
        ref="qmpTabs"
        v-model:active="activeTab"
        animated
        lazy-render
        class="tab-nav-transparent"
        @change="tabOnChange"
      >
        <qmp-tab v-for="(tab, i) in tabs" :key="i" :title="tab.title" :name="tab.name">
          <List
            :ref="(el) => setListRef(el, tab.name)"
            :page-source="pageSource"
            :search-value="searchValue"
            :status="tab.name"
            @review="onReview"
          />
        </qmp-tab>
      </qmp-tabs>
    </div>
    <div class="ctm-content-foot">
      <div class="btn ctm-btn-main radius-larg" @click="onCreate">新增验收任务</div>
    </div>
    <Review :baseInfo="activeRowData" v-model:show="showReview" />
  </div>
</template>

<script lang="ts">
  import { toRefs, getCurrentInstance, defineComponent } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { TabPage } from '@/mixins/CommonPage'
  import SearchInput from '@/components/SearchInput/index.vue'
  import List from './List.vue'
  import Review from './Review.vue'
  export default defineComponent({
    name: 'TaskCommonIndex',
    components: { SearchInput, List, Review },
    props: {
      pageSource: {
        type: String,
        default: '' //页面来源（task 任务管理，soft 软装，hard 硬装）
      }
    },
    setup(props) {
      const $router = useRouter()
      const $store = useStore()
      const instance = getCurrentInstance()
      const { datas, onSearch, onClear, onCreate, onReview, tabOnChange, setListRef } = TabPage(
        props.pageSource,
        $router,
        $store,
        instance
      )

      return {
        ...toRefs(datas),
        onSearch,
        onClear,
        onCreate,
        tabOnChange,
        setListRef,
        onReview
      }
    }
  })
</script>
<style lang="scss" scoped></style>
